<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-26 21:21:24
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-29 16:43:23
 * @Description: 
-->
<template>
  <el-menu
    :default-active="route.path"
    class="el-menu-vertical-demo"
    :collapse="menuStore.isCollapse"
    router
  >
    <template v-for="(item, index) in menuList" :key="item.id">
      <el-menu-item v-if="item.path" :index="item.path">
        <el-icon>
          <component :is="item.icon_name"></component>
        </el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>

      <el-sub-menu v-else :index="index">
        <template #title>
          <el-icon>
            <component :is="item.icon_name"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item v-for="el in item.children" :key="el.id" :index="el.path">
          <el-icon>
            <component :is="el.icon_name"></component>
          </el-icon>
          <span>{{ el.name }}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { role } from "@/api";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia"
import { useMenuStore } from "@/stores/menu.js";

const menuStore = useMenuStore();
 const route = useRoute();

const menuList = (
  await role.getSideBar({ id: sessionStorage.role, type: "tree" })
).data;
</script>

<style lang='less' scoped>
.el-menu-vertical-demo {
  height: 100%;
  .el-menu-item,
  .el-sub-menu {
    overflow-x: hidden;
    .el-sub-menu__title {
      &:hover {
        background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
        color: #fff;
      }
    }
    &.is-opened {
      .el-sub-menu__title {
        background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
        color: #fff;
      }
    }
    &.is-active {
      .el-sub-menu__title {
        background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
        color: #fff;
      }
      background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
      color: #fff;
    }
    &:hover {
      background: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
      color: #fff;
    }
    .el-icon {
      margin-right: 20px;
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
</style>
